<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>快来听听我弹的《{{title}}》</title>
    <link rel="stylesheet" href="{{url_for('static',filename='reset.css')}}">
    <!-- <link rel="stylesheet" href="../../static/reset.css"> -->
    <link rel="stylesheet" href="{{url_for('static',filename='APlayer.min.css')}}">
    <!-- <link rel="stylesheet" href="../../static/APlayer.min.css"> -->
    <style>
        body {
            position: relative;
            width: 100%;
            overflow-y: scroll;
            background: #eeeeee;
        }

        .main {
            position: relative;
        }

        .main .main-load {
            display: block;
            background: rgba(0, 0, 0, 0.7);
            z-index: 10;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .main .main-load .load-container {
            width: 2rem;
            height: 2rem;
            position: absolute;
            top: 50%;
            margin-top: -1rem;
            left: 50%;
            margin-left: -1rem;
        }

        .main .main-load .load-container .load-img {
            width: 1rem;
            height: 1rem;
        }

        .main .main-load .load-container p {
            margin-top: 0.2rem;
            font-size: 0.28rem;
            color: #fff;
        }

        .main .main-head {
            position: relative;
            width: 7.5rem;
            background: url('/static/share_high_img/bg.png') no-repeat center;
            /* background: url('../../static/share_high_img/bg.png') no-repeat center; */
            background-size: cover;
            padding-top: 1.3rem;
            padding-bottom: 1.8rem;
        }

        .main .main-head .head-container {
            width: 6.3rem;
            /* margin-top:1.15rem; */
            margin: 0 auto;
            background: #fff;
            border-radius: 0.1rem;
            padding-bottom: 1.1rem;
        }

        .main .main-head .head-container .container-top {
            position: relative;
            margin: 0 auto;
            width: 5.22rem;
            height: 2.13rem;
            background: url('/static/share_high_img/head_bg.png') no-repeat center;
            /* background: url('../../static/share_high_img/head_bg.png') no-repeat center; */
            background-size: cover;
        }

        .main .main-head .head-container .container-top .king-img {
            z-index: 9;
            position: absolute;
            top: -0.95rem;
            left: 1.85rem;
            width: 0.48rem;
            height: 0.4rem;
        }

        .main .main-head .head-container .container-top .top-img {
            position: absolute;
            top: -0.79rem;
            left: 0;
            right: 0;
            margin-left: auto;
            margin-right: auto;
            width: 1.79rem;
            height: 1.79rem;
            background: #ececec;
            border-radius: 50%;
        }
        .main .main-head .head-container .container-top .top-img img{
            width: 1.79rem;
            height: 1.79rem;
            border-radius: 50%;
        }

        .main .main-head .head-container .container-top .high-img {
            position: absolute;
            bottom: 0.75rem;
            left: 0;
            right: 0;
            margin-left: auto;
            margin-right: auto;
            width: 2.92rem;
            height: 0.65rem;
        }

        .main .main-head .head-container .container-score {
            margin-top: -0.4rem;
            margin-bottom: 0.6rem;
        }

        .main .main-head .head-container .container-score .score-exact {
            display: inline-block;
            vertical-align: top;
            color: #25b057;
            font-size: 0.3rem;
            margin-right: 1.75rem;
        }

        .main .main-head .head-container .container-score .score-exact p:first-child {
            font-size: 0.72rem;
        }

        .main .main-head .head-container .container-score .score-rhythm {
            display: inline-block;
            vertical-align: top;
            color: #f59e16;
            font-size: 0.3rem;
        }

        .main .main-head .head-container .container-score .score-rhythm p:first-child {
            font-size: 0.72rem;
        }

        .main .main-head .head-container .container-word {
            padding-left: 0.7rem;
            padding-right: 0.7rem;
        }

        .main .main-head .head-container .container-word p {
            font-size: 0.3rem;
        }

        .main .main-head .head-container .container-word p:first-child {
            font-size: 0.38rem;
            font-weight: bold;
        }

        .main .main-bottom {
            width: 100%;
            padding-top: 0.6rem;
            padding-bottom: 0.55rem;
            background: #eeeeee;
        }

        .main .main-bottom .bottom-challenge {
            width: 3.45rem;
            height: 0.8rem;
            background: #7969E6;
            border-radius: 0.08rem;
            font-size: 0.3rem;
            color: #fff;
            text-align: center;
            line-height: 0.8rem;
            margin-bottom: 0.42rem;
        }

        .main .main-bottom .bottom-download {
            display: inline-block;
            vertical-align: top;
            width: 2.6rem;
            height: 0.8rem;
            border: 1px solid #7969E6;
            border-radius: 0.08rem;
            font-size: 0.3rem;
            color: #7969E6;
            text-align: center;
            line-height: 0.8rem;
            margin-bottom: 0.42rem;
            margin-right: 0.6rem;
        }
        .main .main-bottom .bottom-download a {
            display: inline-block;
            width: 100%;
            height: 100%;
            color: #7969E6;
            text-decoration: none;
        }
        .main .main-bottom .bottom-open {
            display: inline-block;
            vertical-align: top;
            width: 2.6rem;
            height: 0.8rem;
            background: #7969E6;
            border-radius: 0.08rem;
            font-size: 0.3rem;
            color: #fff;
            text-align: center;
            line-height: 0.8rem;
            margin-bottom: 0.42rem;
        }

        .main .to-shop {
            text-align: center;
            margin: 0 auto;
            width:100%;
            padding-bottom: 0.55rem;
            background: #eeeeee;
        }
        .main .to-shop .openShop{
            text-align: center;
        }
        .main .to-shop .openShop .bottom-a{
            text-decoration: none;
            color: #7969E6;
            font-size: 0.28rem;
            display: inline-block;
            border-bottom: 2px solid #7969E6;
        }
    </style>
</head>
<script type="text/javascript">
        (function () {
            window.zhuge = window.zhuge || [];
            window.zhuge.methods = "_init identify track getDid getSid getKey setSuperProperty setUserProperties setPlatform".split(" ");
            window.zhuge.factory = function (b) {
                return function () {
                    var a = Array.prototype.slice.call(arguments);
                    a.unshift(b);
                    window.zhuge.push(a);
                    return window.zhuge;
                }
            };
            for (var i = 0; i < window.zhuge.methods.length; i++) {
                var key = window.zhuge.methods[i];
                window.zhuge[key] = window.zhuge.factory(key);
            }
            window.zhuge.load = function (b, x) {
                if (!document.getElementById("zhuge-js")) {
                    var a = document.createElement("script");
                    var verDate = new Date();
                    var verStr = verDate.getFullYear().toString() + verDate.getMonth().toString() + verDate.getDate().toString();

                    a.type = "text/javascript";
                    a.id = "zhuge-js";
                    a.async = !0;
                    a.src = (location.protocol == 'http:' ? "http://sdk.zhugeio.com/zhuge.min.js?v=" : 'https://zgsdk.zhugeio.com/zhuge.min.js?v=') + verStr;
                    a.onerror = function () {
                        window.zhuge.identify = window.zhuge.track = function (ename, props, callback) {
                            if (callback && Object.prototype.toString.call(callback) === '[object Function]') callback();
                        };
                    };
                    var c = document.getElementsByTagName("script")[0];
                    c.parentNode.insertBefore(a, c);
                    window.zhuge._init(b, x)
                }
            };
            var ua = window.navigator.userAgent.toLocaleLowerCase();
            var env = window.location.host.indexOf('dev') > 0 || window.location.host.indexOf('pre') > 0
            var debug = env ? true : false;
            var channel = /micromessenger/.test(ua) ? 'wechat' : /weibo/.test(ua) ? 'weibo' : 'other';
            window.zhuge.load('99944c90bdfe483ab3596e7f99f20c2e', {
                debug: debug,   // 埋点是否实时调试
                platform: { //自定义触发环境信息(选填)
                    '版本': 'v4.2'
                },
                superProperty: { //全局的事件属性(选填)
                    '应用名称': 'The ONE智能钢琴（新）'
                },
                utm: {
                    'utm_source': channel
                },
                autoTrack: true,
                //启用全埋点采集（选填，默认false）
                singlePage: false //是否是单页面应用（SPA），启用autoTrack后生效（选填，默认false）
            });
        })();
    </script>
<script>
    document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px';
    window.onresize = function (e) {
        document.documentElement.style.fontSize = document.documentElement.offsetWidth / 7.5 + 'px';
    }
</script>

<body>
    <style>
        .aplayer {
            position: absolute;
            bottom: 0;
            height: 1.37rem;
            width: 100%;
            background: #21192a;
            margin: 0;
            padding: 0;
        }

        .aplayer .aplayer-pic {
            height: 1.37rem;
            width: 1.5rem;
            background: none;
        }

        .aplayer .aplayer-pic .aplayer-button {
            width: 0.72rem;
            height: 0.72rem;
            border: 2px solid #fff;
            top: 50%;
            left: 50%;
            margin: -0.36rem 0 0 -0.36rem;
            opacity: 1;
        }

        .aplayer .aplayer-pic .aplayer-play .aplayer-icon {
            position: absolute;
            top: 0;
            left: 0.05rem;
            height: 0.72rem;
            width: 0.72rem;
        }

        .aplayer .aplayer-pic .aplayer-button .aplayer-fill {
            fill: #ffffff;
        }

        .aplayer .aplayer-pic .aplayer-button .aplayer-icon-pause {
            height: 0.56rem;
            width: 0.56rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -0.28rem;
            margin-left: -0.28rem;
        }

        .aplayer-icon {
            color: #ffffff;
        }

        .aplayer-icon:before {
            display: none !important;
        }

        .aplayer .aplayer-info {
            position: absolute;
            left: 1.5rem;
            top: 0.35rem;
            width: 4.1rem;
            margin: 0 !important;
            padding: 0 !important;
        }

        .aplayer .aplayer-info .aplayer-music {
            display: none;
        }

        .aplayer .aplayer-info .aplayer-controller {
            margin-top: 0.3rem;
            display: block;
        }

        .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
            height: 0.02rem;
        }

        .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
            margin-top: -0.17rem;
            width: 0;
            height: 0;
            display: block;
            padding: 0.07rem;
            background: red;
            border: 0.12rem #fff solid !important;
        }

        .aplayer .aplayer-info .aplayer-controller .aplayer-time {
            margin: 0 !important;
            padding: 0 !important;
            position: absolute;
            right: -1.7rem;
            top: -0.06rem;
            color: #fff;
            font-size: 0.24rem;
        }

        .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
            display: none;
        }
    </style>
    <div class="main">
        <div class="main-load">
            <div class="load-container" align="center">
                <div class="load-img">
                    <img src="{{url_for('static',filename='share_img/white.gif')}}" alt="">
                </div>
                <p>演奏准备中...</p>
            </div>
        </div>
        <div class="main-head">
            <div class="head-container">
                <div class="container-top">
                    {% if correction['correction']['best'] == 1 %}
                        <div class="king-img">
                            <img src="{{url_for('static', filename='share_high_img/king.png')}}" alt="">
                        </div>
                    {% endif %}
                    <div class="top-img">
                        <img src='{{correction["user"]["avatar"]}}' alt="">
                        <!-- <img src="../../static/share_high_img/head.png" alt=""> -->
                    </div>
                    {% if correction['correction']['best'] == 1 %}
                        <div class="high-img">
                            <img src="{{url_for('static',filename='share_high_img/high.png')}}" alt="">
                            <!-- <img src="../../static/share_high_img/high.png" alt=""> -->
                        </div>
                    {% else %}
                        <div class="high-img">
                            <img src="{{url_for('static',filename='share_high_img/play.png')}}" alt="">
                            <!-- <img src="../../static/share_high_img/play.png" alt=""> -->
                        </div>
                    {% endif %}
                </div>
                <div class="container-score" align="center">
                    <div class="score-exact">
                        <p>{{correction["correction"]["accurateness"]}}</p>
                        <p>音准</p>
                    </div>
                    <div class="score-rhythm">
                        <p>{{correction["correction"]["rhythm"]}}</p>
                        <p>节奏</p>
                    </div>
                </div>
                <div class="container-word" align="center">
                    <p>{{correction["user"]["name"]}}</p>
                    <p>弹奏的《{{title}}》</p>
                    <p>{{correction["correction"]["comment"]}}</p>
                </div>
            </div>
            <div id="player" class="aplayer"></div>
        </div>
        <div class="main-bottom" align="center">
        </div>
        <div class="to-shop">
            <p class="openShop">
                <a class="bottom-a" href="http://shop.1tai.com/h5/">了解TheONE智能钢琴</a>
            </p>
        </div>
    </div>
    <script type="text/template" id="theone-client-weixin">
        <div class="bottom-challenge" id="btn">我也要弹</div>
    </script>
    <script type="text/template" id="theone-client-browser">

            <span class="bottom-download">
                <a href="http://www.1tai.com/download-smartpiano.html">下载</a>
            </span>

        <span class="bottom-open">打开</span>
    </script>
    <script src="/static/APlayer.min.js"></script>
    <script src="/static/js/util.js"></script>
    <script>
            var timer = setTimeout(function() {
                xmlHttp("{{correction['correction']['mp3']}}")
            }, 1000)

            function xmlHttp(url) {
                var xml = new XMLHttpRequest()
                xml.open('get', url, true)
                xml.send(null)
                xml.onreadystatechange = function () {
                    if (xml.readyState === 4) {
                        if (xml.status !== 404) {
                            clearTimeout(timer)
                            timer = null
                            load.style.display = 'none'
                        }
                    }
                }
            }

            (function () {
                var main = document.querySelector('.main-bottom')
                var ua = window.navigator.userAgent.toLocaleLowerCase()
                var isAndroid = /android/.test(ua)
                var isIOS = /ipad|iphone|ipod/.test(ua)
                // 匹配qq，不匹配qqbrowser
                var showTip = /micromessenger|weibo|qq(?!browser)/.test(ua)
                var tClient = showTip ? document.querySelector('#theone-client-weixin').innerHTML : document.querySelector('#theone-client-browser').innerHTML

                main.innerHTML = tClient

            })();

            var main = document.querySelector('.main-bottom')
            var load = document.querySelector('.main-load')
            var ua = window.navigator.userAgent.toLocaleLowerCase()
            var isAndroid = /android/.test(ua)
            var isIOS = /ipad|iphone|ipod/.test(ua)

            var universalLink =  "{{correction['app_url']}}"
            var isBest = "{{correction['correction']['best']}}"
            var title = "{{title}}"
            var accurateness = "{{correction['correction']['accurateness']}}"
            var rhythm = "{{correction['correction']['rhythm']}}"
            var channel = /micromessenger/.test(ua) ? 'wechat' : /weibo/.test(ua) ? 'weibo' : 'other';

            universalLink = formatUrl(universalLink)

            universalLink = universalLink + '&from=' + encodeURIComponent(channel) + '&from_page=' + encodeURIComponent('纠错得分')

            function createScheme() {
                var baseScheme = 'smartpiano'
                return baseScheme + universalLink.substr(5)
            }

            window.onload = function() {

                document.querySelector('.openShop').addEventListener('click', function(){
                    zhuge.track('纠错分享页-点击官网链接', {
                        '分享渠道': channel
                    })
                })

                setTimeout(function() {
                    var btn = document.querySelector('#btn')
                    var openBtn = document.querySelector('.bottom-open')
                    var download = document.querySelector('.bottom-download')

                    btn && btn.addEventListener('click', function () {
                        zhuge.track('纠错分享页-我也要弹', {
                            '节奏得分': rhythm,
                            '音准得分': accurateness,
                            '演奏属性': isBest == 1 ? '最高得分' : '我的演奏',
                            '分享渠道': channel,
                            '单曲名称': title
                        }, function() {
                            window.location.href = universalLink;
                        })
                    }, false)

                    openBtn && openBtn.addEventListener('click',  function() {
                        if (isAndroid) {
                            var url = createScheme();
                            window.location.href = url;
                        }

                        if (isIOS) {
                            window.location.href = url;
                        }
                    }, false)

                    download && download.addEventListener('click', function() {
                        if (isBest == 0) {
                            zhuge.track('下载', {
                                '纠错得分': title,
                                '渠道来源': channel
                            })
                        } else {
                            zhuge.track('下载', {
                                '最高得分': title,
                                '渠道来源': channel
                            })
                        }
                    }, false)

                }, 1000)
            }


            var player = new APlayer({
                element: document.getElementById('player'),
                narrow: false,
                autoplay: false,
                showlrc: false,
                preload: 'auto',
                mode: 'loop',
                music: {
                    url: "{{correction['correction']['mp3']}}",
                }
            })

            player.on('play', function() {
                zhuge.track('纠错分享页-播放', {
                    '单曲名称': title
                })
            })
            zhuge.track('点击纠错分享页', {
                '分享渠道': channel,
                '单曲名称': title
            })

            zhuge.track('点击分享链接', {
                '分享内容': '纠错得分',
                '分享渠道': channel
            })

    </script>
</body>

</html>